<template>
  <div>
    <el-aside width="350px" class="aside-contain-wraper">
      <el-row class="aside-contain-wraper-title">
        <el-col :span="6"
          ><div class="aside-contain-title">文章热搜</div></el-col
        >
        <el-col :span="18"
          ><div class="aside-contain-icon" @click="refresh">
            <i class="el-icon-refresh-right">点击刷新</i>
          </div></el-col
        >
      </el-row>
      <HotTitle :refreshNum="refreshNum"></HotTitle>
      <div class="getMoreHot" @click="toAllRank">查看完整热搜榜单</div>
    </el-aside>
  </div>
</template>

<script>
import HotTitle from "../components/hottitle/HotTitle.vue";
export default {
  components: {
    HotTitle,
  },
  data() {
    return {
      // 刷新榜单
      refreshNum: 0,
    };
  },
  methods: {
    // 刷新榜单
    refresh() {
      this.refreshNum++;
    },
    // 查看完整榜单
    toAllRank() {
      if (this.$route.path == "/hotrank") {
        return;
      }
      this.$router.push({
        path: "/hotrank",
      });
    },
  },
};
</script>

<style scoped lang="less">
.aside-contain-wraper {
  margin: 10px;
  padding: 10px;
  background-color: #fff;
  .aside-contain-wraper-title {
    width: 100%;
    border-bottom: 1px solid rgb(216, 216, 216);
    padding-bottom: 5px;
    .aside-contain-title {
      font-size: 16px;
    }
    .aside-contain-icon {
      cursor: pointer;
      width: 100%;
      text-align: right;
      .el-icon-refresh-right {
        font-size: 14px;
        color: #939393;
      }
    }
  }
  .getMoreHot {
    cursor: pointer;
    text-align: center;
    height: 20px;
    padding-top: 5px;
    font-size: 10px;
    color: #939393;
  }
}
</style>